<style lang="scss">
@import '@/assets/css/variable';
.matchResult{
	// background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/0008e0cd-2715-4856-857a-b647a1e5134b.png');
	// background-repeat: no-repeat;
	// background-position: center;
	// background-size: 100% 100%;
	// box-sizing: border-box;
	// padding-top: 60px;
	background-image: linear-gradient(to bottom, #003792 , #01617a);
	.tabBox{
		margin-top: 12px;
		.tabItem{
			padding: 6px 12px;
			color: white;
			background-color: #004fc7;
		}
	}
}
</style>

<template>
  <div class="matchResult wrapperContent2" ref="matchResult" @scroll="scrollBottom">
	<!-- <navbar></navbar> -->
	<!-- <div class="padding-all-l" @click="$router.replace('/member')">
		<van-icon name="arrow-left" color="#ffffff" size="20"/>
	</div>
	<div v-if="count>0">
		<div class="fs-18 fc-fff padding-lr-l line-height-l letter-s-1">
			您所申请的相关政策
		</div>
		<div class="fs-18 fc-fff padding-lr-l line-height-l letter-s-1">
			共{{count}}个
		</div>
	</div> -->
	<div class="tabList w-100 flex align-center justify-around mar-t-10" v-if="tabList">
		<div style="flex: 0 0 10px;"></div>
		<div class="tabItem flex flex-column align-center" style="min-width: 60px;" v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
			<div class="fc-f4f4f4 mar-t-8 text-mini ellipsis-line1" :style="{fontSize:fontSize==1?'16px':'22px'}">{{item.text}}</div>
			<div class="selectedLine" v-if="active==index"></div>
		</div>
		<div style="flex: 0 0 10px;"></div>
	</div>
	<my-list :list="listCatchData[active]" :load="load[active]"></my-list>
  </div>
</template>
<script>
import myList from '@/components/list/IndexList.vue'
import navbar from '@/components/Navbar.vue'
import { myMixins } from "@/assets/js/mixins.js";
export default {
	mixins: [myMixins],
	name:'applyResult',
  components: {myList,navbar},
  data() {
    return {
		searchText:'',
		active:0,
		policy_keywords:'',
		is_validity:'',
		// pageSize:10,
		// currPage:1
		listCatchData:{},
		load:{},
		pageSize:100,
		count:0,
		tabList:[
			{id:0,text:'申请中'},
			{id:1,text:'申请成功'},
			{id:2,text:'申请失败'}
		],
    };
  },
  created() {
    // document.title = "网络学习首页";
 //  	this.bus.$on('scrollToTop4Result',()=>{
 //  		console.log("scrollToTop4Result")
 //  		// this.$refs.policy.scrollTo(0,localStorage.getItem('scrollTop'))
 //  		this.$refs.searchResult.scrollTop = localStorage.getItem('scrollTop4Result')
 //  	})
	// this.bus.$on('refreshSearchResult',()=>{
	// 	console.log('=================refreshSearchResult=========================',localStorage.getItem('searchText'))
	// 	this.policy_keywords = localStorage.getItem('searchText')||this.$route.query.searchText
	// 	this.listCatchData[0] = []
	// 	this.count = 0
	// 	this.getList(0)
	// })
  },
 //  beforeDestroy() {
 //  	console.log("off scrollToTop4Result scrollToTop4Result beforeDestroy")
 //  	this.bus.$off('scrollToTop4Result')
	// this.bus.$off('refreshSearchResult')
 //  },
  mounted() {
	  console.log('=================mounted====================')
	// this.policy_keywords = this.$route.query.searchText
	// console.log("policy_keywords",this.policy_keywords)
	this.active = localStorage.getItem('active4Apply') || 0
	this.listCatchData[this.active] = []
	this.getList(this.active)
  },
  methods: {
	  tabClick(item,current) {
	  	this.active = current
		console.log('this.active',this.active)
	  	// localStorage.setItem('active',this.active)
	  	// this.policy_keywords = item.text=='全部'?'':item.text
	  	localStorage.setItem('active4Apply',this.active)
	  	if(!this.listCatchData[this.active] || this.listCatchData[this.active].length === 0){
			console.log('tabClick_getList')
	  		this.getList(this.active)
	  	}
	  },
	getList(current) {
		if(!this.load[current]){
			this.load[current] = {
				page:1,
				loading:'loading'
			}
		}
		const params = {
			status:current,
			currPage:this.load[current].page,
			pageSize:this.pageSize
		}
		console.log('getList__params',params)
		this.$request.applyPolicyList(params).then(res => {
			const data = res.data.list
			this.count = res.data.page.count
			//如果没数据了
			if(data.length === 0 || data.length < this.pageSize){
				let oldLoad = {}
				oldLoad.loading = 'noMore'
				oldLoad.page = this.load[current].page
				this.load[current] = oldLoad
			}
			if(data.length == this.pageSize) {
				let oldLoad = {}
				oldLoad.loading = 'loadEnd'
				oldLoad.page = this.load[current].page
				this.load[current] = oldLoad
			}
			if(data.length>0){
				let oldList = this.listCatchData[current] || []
				oldList.push(...data)
				this.listCatchData[current] = oldList
			}
		}).finally(res=>{
			if(!this.listCatchData[current]||this.listCatchData[current].length<=0){
				this.load[current].loading='noData'
			}
			// this.bus.$emit('refreshList',this.load[current])
			console.log('this.load[current]',this.load[current])
			this.$forceUpdate()
		})
	},
    searchBtn() {
		console.log("search")
	},
	scrollBottom(e) {
		// console.log('e',e)
		const {scrollTop, clientHeight, scrollHeight} = e.target
		// console.log(scrollTop, clientHeight, scrollHeight)
		localStorage.setItem('scrollTop4MatchResult',scrollTop)
		if (scrollTop + clientHeight === scrollHeight){
			console.log('滚动到底部啦')
		}
	},
  }
}

</script>